<template>
	<view >
		<view class="status_bar">
			
		</view>
		<view>
			<view style="height: 90px;" class="">
				
			</view>
			<van-nav-bar
			  title="消息"
		
			  bind:click-left="onClickLeft"
			  bind:click-right="onClickRight"
			  fixed="true"
			/>
		</view>
		<view class="chat-con">
			<view @click="gostandmsg()" class="chat-item">
				<view class="chaterimg">
					<image src="http://112.74.185.144:8000/files/iW41667461999.png" mode=""></image>
					<view v-if="chatkefu.count>0" class="msgtip">
						{{chatkefu.count}}
					</view>
				</view>
				<view class="chat-txt">
					<view class="">
						站内信
					</view>
					<!-- <text>{{chatkefu.chatContent}}</text> -->
				</view>
			</view>
			<view @click="gocustomerchat()" class="chat-item">
				<view class="chaterimg">
					<image src="http://112.74.185.144:8000/files/iW41667461999.png" mode=""></image>
					<view v-if="chatkefu.count>0" class="msgtip">
						{{chatkefu.count}}
					</view>
				</view>
				<view class="chat-txt">
					<view class="">
						在线客服
					</view>
					<u-parse :content="kefumsg"></u-parse>
					<!-- <text>{{chatkefu.chatContent}}</text> -->
				</view>
			</view>
			
			<view @click="gochat(item.phone)" v-for="item,index in chatlist" :key="index" class="chat-item">
				<view class="chaterimg">
					<image :src="item.userPhoto" mode=""></image>
					<view v-if="item.msgnum" class="msgtip">
						{{item.msgnum}}
					</view>
				</view>
				<view class="chat-txt">
					<view class="">
						{{item.userName}}
					</view>
					<u-parse :content="msgcontent(item)"></u-parse>
					<!-- <text>{{}}</text> -->
				</view>
			</view>
		</view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	// import uParse from '@/components/gaoyia-parse/parse.vue'
	import request from '../../com/request.js'
	
	export default {
		components: {
			// uParse //注册组件
		},
		data() {
			return {
				content: `
									<p>露从今夜白，月是故乡明</p>
									<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
								`,
				barHeight: 0,
				userTel:'',
				chatlist:[],
				chatkefu:{}  //客服聊天的最后一条信息
				
			}
		},
		methods: {
			gostandmsg(){
				uni.navigateTo({
					url:"/pages/noticepage/noticepage"
				})
			},
			gocustomerchat(){
				uni.navigateTo({
					url:"/pages/customerchat/customerchat"
				})
			},
			gochat(phone){
				uni.navigateTo({
					url: `../chatpage/chatpage?receiverPhone=${phone}`
				});
			},
			getchatlist(){
				request({
					url:"api/chat/getchatlist",
					data:{
						sendid:this.userTel,
						type:0
						
					},
					success:(resp)=>{
						console.log(resp);
						this.chatlist=resp.data.data
						this.chatkefu=resp.data.kefudata[0]
					}
				})
			},
			showtip(msg){
				uni.showToast({
					title: msg,
					duration: 1000
				});
				// uni.showLoading({
				// 	title: '加载中'
				// });
			}
		},
		computed:{
			msgcontent(){
				return (obj)=>{
					if(obj.msgtxt){
						// console.log(111);
						return obj.msgtxt
					}else{
						return '图片'
					}
				}
			},
			kefumsg(){
				if (this.chatkefu.chatContent!='') {
					console.log(this.chatkefu.chatContent,1111);
					return this.chatkefu.chatContent
				} else{
					return '图片'
				}
			},
		},
		onLoad() {
			
			// this.socket.on('sysmsg', (msg) => {
			// 	console.log('站内信', msg);
			// 	this.showtip(msg.msg)
				
				
			// });
			this.userTel=uni.getStorageSync("userTel")
			console.log(this.userTel);
			this.getchatlist()
			// console.log(request,73);
			this.socket.on('connect', () => {
				// ws连接已建立，此时可以进行socket.io的事件监听或者数据发送操作
				// 连接建立后，本插件的功能已完成，接下来的操作参考socket.io官方客户端文档即可
				console.log('ws 已连接');
				this.socket.emit('login', {
					loginer:uni.getStorageSync("userTel"),
					time: +new Date(),
				});
			});
			this.socket.on('messagetip', (msg) => {
				console.log('ws 收到服务器消息', msg);
				
				this.getchatlist()  //重新获取数据
				
				// this.chatArr.push(msg)
				// let ishave=false
				// this.chatlist.forEach(item=>{
				// 	if(item.phone==msg.senderid){
				// 		ishave=true
				// 		item.msgnum+=1
				// 		item.msgtxt=msg.msg
				// 		item.msgimg=msg.msgimg
						
				// 	}
				// })
				// if(!ishave){
				// 	this.chatlist.unshift({
				// 		msgimg:msg.msgimg,
				// 		msgnum:1,
				// 		msgtxt:msg.msg,
						
				
						
				// 	})
				// }
				
			});
		
	
		}
	}
</script>

<style scoped>
	
	.status_bar {
	  height: calc(var(--status-bar-height) - 4px);
	  width: 100%;
	  /* background-color: #007aff; */
	}
	.chat-item{
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding-left: 20rpx;
		margin-bottom: 15px;
		
	}
	.chaterimg{
		width: 50px;
		position: relative;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
		
	}
	.chaterimg image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.chat-txt view{
		font-size: 14px;
	}
	.chat-txt text{
		font-size: 20rpx;
	}
	.msgtip{
		position: absolute;
		min-width: 10px;
		min-height: 10px;
		border-radius: 50%;
		background-color: red;
		top: 8px;
		right: -1px;
		color: white;
		font-size: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
</style>
